<template>
  <div style="height:90%;width:100%;">
    <div class="basicCanvas" style="height:100%;width:100%;"></div>
  </div>
</template>

 <script>
export default {
  name: "basicIncome",
  data(){
    return{
    }
  },
  props: {
    mainAndbasic: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch:{
    mainAndbasic(val){
      let maxNumber = Math.max.apply(null,val.basicAnalysis.yAxis);
     this.getPie(val,maxNumber);
    }
  },
  methods: {
    getPie(val,maxNumber) {
      const that = this;
      var myChart = this.$echarts.init(document.querySelector(".basicCanvas"));
      let option = {
      tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            },
          formatter: '{b} <br /> {a0}: {c0}'+ "%"+'<br />{a1}: {c1}'+ "%"
          },
        color:['#00b050','#0070c0'],
        legend: {
             data: ['基本面收入完成率','主营收入完成率'],
            },
        grid: {
          left: "60px",
          right: "20px",
          bottom:'30px',

         },
        xAxis: {
          type: 'category',
          data:val.mainAnalysis.xAxis
          },
        yAxis: [
              {
                  type: 'value',
                  min: 0,
                  splitLine:{show: false},  //去除网格线
                   // max: minNumber*2,
                  // // // interval: 50,
                  axisLabel: {
                      formatter: '{value} %',
                      show:false
                  },
                  axisTick:{ //y轴刻度线
                      show:false
                  },
                  axisLine:{ //y轴
                      show:false
                  },
              },
              {
                  type: 'value',
                  min: 0,
                  max: maxNumber*2,
                  // // interval: 50,
                  splitLine:{show: false},  //去除网格线
                  axisLabel: {
                      formatter: '{value}%',
                      show:false
                  },
                  splitArea:{
                      show:true,
                      areaStyle:{
                          color:'#f5f5f5'
                      },
                  },
                  axisTick:{ //y轴刻度线
                      show:false
                  },
                  axisLine:{ //y轴
                      show:false
                  },
              }

            ],

        series: [
          {
            type: "line",
             name: '基本面收入完成率',
            smooth: true,
            data: val.basicAnalysis.yAxis,
            lineStyle: {
                   normal: {
                       color: "#00b050", // 线条颜色
                       width: 0.8,
                   }
            },
            itemStyle : {
              normal: {
                label : {
                  show: true,
                  position: 'top',
                  textStyle: {
                     color: '#00b050'
                   },
                     formatter:"{c}%",
                  },
               },
            },
          },
         {
          type: "bar",
          name: '主营收入完成率',
          data: val.mainAnalysis.yAxis,
          yAxisIndex: 1,
          barWidth :20,
         itemStyle: {
                     normal: {
                         // 随机显示
                         //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                         // 定制显示（按顺序）
                     color: function(params) {
                      var c="";
                      var index =val.mainAnalysis.xAxis.indexOf("浙江");
                      if(params.dataIndex !== index){
                            c='#0070c0'
                         }else{
                            c='#c00000'
                         }
                         return c;
                       },
                         label : {
                                 show: true,
                                 position: 'top',
                                 textStyle: {
                                    color: '#0070c0'
                                  },
                                   formatter:"{c}%",
                         },
                     },

                 },
        },

      ],
      };
      myChart.setOption(option);
    }
  },
};
 </script>

 <style>

 </style>
